{% extends 'myblog/base.html' %}

{% block title %}
    博客首页
{% endblock %}

{% block style %}
    <script src="/static/myblog/js/jquery-2.1.1.min.js"></script>
    <script src="/static/myblog/js/vue.min.js"></script>
    <script src="/static/myblog/js/vue-resource.js"></script>
{% endblock %}

{% block content %}

    {#        nav导航#}
    <div class="picshow">
        <ul>
            {% for subject in course %}
                <li>
                    <a href="/myblog/list/?type_id={{ subject.id }}&page=1"><i>
                        <img src="/static/{{ subject.course_img }}"></i>
                        <div class="font">
                            <h3>{{ subject.course_name }}</h3>
                        </div>
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>


    {#        首页主要内容content#}

    <article>
        {% verbatim %}
        <div class="blogs" id="wrapper">

            <div v-for="art in article">

                <li class="outpart">
                    <span class="blogpic" v-model=art>
                        <a :href="'/myblog/info/?id='+art.id" class="by_click">
                            <img :src="'/static/'+ art.art_img"></a>
                    </span>
                    <h3 class="blogtitle">
                        <a :href="'/myblog/info/?id='+art.id" class="by_click">{{ art.art_title }}</a>
                    </h3>
                    <div class="bloginfo" v-html="art.art_description">
                    </div>
                    <div class="autor">
                    <span class="lm">
                        <a :href="'/myblog/list/?type_id='+art.art_type_id+'&art_id='+art.id"
                           :title=art.art_type class="classname">{{ art.art_type }}</a>
                    </span>
                        <span class="dtime">{{ art.art_date }}</span>
                        <span class="viewnum">浏览（<a :href="'/myblog/info/?id='+art.id">{{ art.art_click }}</a>）</span>
                        <span class="readmore"><a :href="'/myblog/info/?id='+art.id" class="by_click">阅读原文</a></span>
                    </div>
                </li>
            </div>
        </div>
        {% endverbatim %}


        {#    侧边栏#}
        <div class="sidebar">


            {#                        首页标签云#}
            <div class="cloud">
                <h2 class="hometitle">标签云</h2>
                <ul>
                    {% for subject in tags %}
                        <a href="/myblog/list/?type_id={{ subject.id }}&page=1">{{ subject.course_name }}</a>
                    {% endfor %}
                    <a href="/myblog/share/">照片墙</a>
                </ul>
            </div>

            {#                        首页搜索框#}
{#            <div class="search">#}
{#                <form action="" method="post" name="searchform" id="searchform">#}
{#                    {% csrf_token %}#}
{#                    <input name="keyboard" id="keyboard" class="input_text" value="请输入关键字"#}
{#                           style="color: rgb(153, 153, 153);"#}
{#                           onfocus="if(value=='请输入关键字'){this.style.color='#000';value=''}"#}
{#                           onblur="if(value==''){this.style.color='#999';value='请输入关键字'}" type="text">#}
{#                    <input name="show" value="title" type="hidden">#}
{#                    <input name="tempid" value="1" type="hidden">#}
{#                    <input name="tbname" value="news" type="hidden">#}
{#                    <input name="Submit" id="search" class="input_submit" value="搜索" type="submit">#}
{#                </form>#}
{#            </div>#}


            {#                        点击排行#}
            <div class="paihang">
                <h2 class="hometitle">点击排行</h2>
                <ul>
                    {% for click in click_art %}
                        <li><b>
                            <a href="/myblog/info/?id={{ click.id }}" target="_blank">
                                {{ click.art_title }}
                            </a>
                        </b>
                            <p>
                                <i>
                                    <img src="/static/{{ click.art_img }}">
                                </i>{{ click.art_description | safe }}
                            </p>
                        </li>
                    {% endfor %}
                </ul>
            </div>


            {#                        推荐#}
            <div class="paihang">
                <h2 class="hometitle">推荐文章</h2>
                <ul>
                    {% for recommend in recommend_art %}
                        <li>
                            <b>
                                <a href="/myblog/info/?id={{ recommend.id }}"
                                   target="_blank">{{ recommend.art_title }}
                                </a>
                            </b>
                            <p>
                                <i>
                                    <img src="/static/{{ recommend.art_img }}">
                                </i>{{ recommend.art_description | safe }}
                            </p>
                        </li>
                    {% endfor %}
                </ul>
            </div>


{#            友情链接#}
            <div class="links">
                <h2 class="hometitle">友情链接</h2>
                <ul>
                    <li><a href="https://github.com/GuangkunYu/Djangoblog" target="_blank" title="博客项目GitHub">我的博客项目GitHub</a>
                    </li>
                </ul>
            </div>


            <div class="weixin">
                <h2 class="hometitle">个人微信</h2>
                <ul>
                    <img src="/static/images/wx.jpg">
                </ul>
            </div>
        </div>
    </article>
    <div class="blank"></div>

    <div style="display: block; position: fixed; right: 15px; bottom: 80px;">
        <a href="">
            <img id="totop" src="/static/images/totop1.png" alt="回到顶部" style="width: 50px; ">
        </a>
    </div>

{% endblock %}

{% block script %}
    <script>
        var pic = document.getElementById("totop");
        pic.onmouseover = function () {
            pic.onmouseout = function () {
                pic.src = "/static/images/totop1.png";
            }
            pic.src = "/static/images/totop.png";
        }
    </script>
    <script>
        Vue.use(VueResource);
        new Vue({
                el: "#wrapper",
                data: {
                    article: [],
                    page: 1,
                    no_data: false,

                },
                created: function () {
                    url = "/myblog/article_api/?page=" + this.page,
                        this.$http.get(url).then(
                            function (data) {
                                article = data.data.res;
                                this.article = article;
                                {#this.page += 1;#}
                            }
                        );

                    window.addEventListener("scroll", this.onscroll)
                },
                methods: {
                    onscroll() {
                        // 计算当前文档的总高度
                       let dh = document.querySelector('body').clientHeight
                        // 浏览器窗口的高度
                        // 视窗高度
                        let outerHeight = document.documentElement.clientHeight;
                        // 滚动高度
                        let scrollTop = document.documentElement.scrollTop;
                        {#console.log(innerHeight, outerHeight, scrollTop)#}

                        if (outerHeight + scrollTop >= dh) {
                            if (this.no_data === true) {
                                return false
                            }
                            this.page = this.page + 1;
                            url = "/myblog/article_api/?page=" + this.page;
                            this.$http.get(url).then(
                                function (data) {
                                    if (data.data.res){
                                        article = data.data.res;
                                        this.article = this.article.concat(article)
                                        console.log(this.article)

                                    }else {
                                        this.no_data = true;
                                    }
                                }
                            ),500
                        }
                    }
                }
            }
        )
    </script>

    {#        <script>#}
    {#            var pn = 1#}
    {#            $('#load').click(function(){#}
    {#                pn++;#}
    {#                $.get('/myblog/js/',{'pn':pn},function(data){#}
    {#                    console.log(data)#}
    {#                    for(i in data){#}
    {#                        var newli = $('.outpart').eq(0).clone();#}
    {#                        newli.find('.blogpic a').attr('href','/myblog/info/?id='+ data[i]['pk']);#}
    {#                        newli.find('.blogpic img').attr('src','/static/'+data[i]['fields']['art_img']);#}
    {#                        newli.find('.blogtitle a').attr('href','/myblog/info/?id='+ data[i]['pk']);#}
    {#                        newli.find('.blogtitle a').html(data[i]['fields']['art_title']);#}
    {#                        newli.find('.bloginfo').html(data[i]['fields']['art_description']);#}
    {#                        newli.find('.lm a').attr('href','/myblog/list/?type_id='+data[i]['fields']['art_type']+'&art_id='+data[i]['pk']);#}
    {#                        newli.find('.lm a').attr('title',data[i]['fields']['art_type']);#}
    {#                        $('#load').before(newli)#}
    {#                    }#}
    {#                },'json')#}
    {#            })#}
    {#        </script>#}

{% endblock %}


